專案使用 SCSS 寫法，我們之前用 Gulp 來 Compile，也使用過 ASP.NET MVC Web Compiler 來處理，後者的缺點是必須使用 Visual Studio 來開發，我個人還是習慣使用 VS Code，所以變成改 SCSS 的話就要在 Visual Studio 裡面改... Orz。

導入 Webpack 後，就可以透過 sass-loader 來處理 SCSS 檔，然後再透過 css-loader 最後 style-loader 將樣式引入頁面 head。

安裝各種 loader

npm i sass-loader node-sass css-loader style-loader -D

將樣式引入頁面 head

設定 sass-loader → css-loader → style-loader 的順序處理 scss 檔，注意 Webpack 的處理順序是 由下而上 / 由右而左

webpack.common.js

module.exports = {
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        "style-loader",      
        "css-loader",
        "sass-loader"
      ]
    }]
  }
}

提取樣式存成獨立 CSS 檔

如果要將樣式獨立存成 CSS 檔，需要另外透過 Plugin 處理。Webpack V4 以前是使用 extract-text-webpack-plugin，V4 則推薦使用 mini-css-extract-plugin。

npm i mini-css-extract-plugin -D

webpack.common.js

var MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,      
        "css-loader",
        "sass-loader"
      ]
    }]
  },  
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css"
    })
  ]  
}

如此即可將樣式另存為 CSS 檔，這種作法能夠有效優化 Bundle 檔案大小，記得也要參考上一篇 頁面緩存設定 所提到的方式來處理緩存策略。